PointC last won the day on
PointC had the most liked content!
PointC
Moderators-
Posts
5,142 -
Joined
-
Last visited
-
Days Won
417
PointC last won the day on
PointC had the most liked content!
About PointC
Contact Methods
- Personal Website
- CodePen
- Company Website
Profile Information
-
Location
Seattle area
-
Interests
web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds
PointC's Achievements
-
I'd go even simpler with yoyo tweens and repeatDelay. Something like this. https://codepen.io/PointC/pen/JjVqxgY/63a3e8ecfaf75286961b6e2ec36abed7 Just my 2 cents. YMMV. Happy tweening. Just FYI - the original pen that I forked had tweens with a 0.1 → 1 second duration on a timeline that was 100 seconds long. With scrub set to true they were animating super fast because they were only a tiny fraction of the duration. .1% - 1%.
-
I think you'd just need to clearProps when you resize and kill the tween. https://codepen.io/PointC/pen/bGJyjYz/03ab931389596f7fd6e582a8f9c6c1ec But I agree with @Trapti, there are easier ways to do this with an SVG. Happy tweening.
-
Feels like the origin is much higher on the targets in that example. I also don't think there is any z rotation. Just a trick of the perspective. Here's a quick fork of your demo. I also switched to SplitText instead of SplitType. This is a GSAP forum after all. 😉 https://codepen.io/PointC/pen/dyLERxK Hopefully that helps. Happy tweening.
-
I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class. gsap.to('.header-icons > div', { Happy tweening.
-
Welcome to the forum. I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation. https://codepen.io/PointC/pen/dyLwoej Hopefully that helps. Happy tweening and welcome aboard.
-
We have several mouse follow effect threads. Here are a couple that should point you in the right direction. Happy tweening.
- 1 reply
-
- 2
-
divide screen size on 100 circle with different radius
PointC replied to amjad_barchini's topic in GSAP
We need to keep this forum focused on GSAP questions. This also seems like the same question you asked here: I'd follow the advice in that thread and use the video @Rodrigo posted as a guide. If you have any GSAP related questions, we're happy to help. Best of luck on your project. -
Nothing jumps out immediately at me as to why that would be a problem. But it's hard to say without a minimal demo. If you can provide that, someone can most likely point you in the right direction. Happy tweening.
-
You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween. https://codepen.io/PointC/pen/gOyQWqY Hopefully that helps. Happy tweening.
-
Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe
-
Using preserveAspectRatio="none" and a vector effect of non-scaling-stroke is problematic. This was discussed in this thread: I would probably come to the same conclusion as that thread and generate the curved line dynamically. Happy tweening.
-
Welcome to the forum. If you're talking about the whole path changing as you scroll, you'd move the trigger to the timeline and add a second tween to animate the stroke color as the ball animates. https://codepen.io/PointC/pen/xxeaKeo/48ff3b51feeaaec506ed6260b59efa17 If you meant the path would change to green only as far as the ball has traveled, you'd need a second green path that is drawn as you scroll. https://codepen.io/PointC/pen/dyLqybY/f291cb8f00561f83216ca7df0680ea9b Happy tweening.
-
If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this. https://codepen.io/PointC/pen/jORKGax The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs. Happy tweening.
-
Is it possible to use MotionPath to start at the end of a path and go backward?
PointC replied to SamStAubyn's topic in GSAP
sure - just use the start/end properties motionPath: { align: sparklePath, path: sparklePath, alignOrigin: [0.5, -0.5], start: 1, end: 0 }, Happy tweening.